<template>
  <div>
    <header>
      <!-- 头部内容 -->
      <p>{{ mydata.name }}提交的学生日常请假申请</p>
      <p>
        <img src="../../public/images/keep/school.png" alt="" /> 某某某某学院
      </p>
      <p>审批通过</p>
    </header>
    <div class="biao"></div>
    <div class="top">
      <ul>
        <li id="zuo"></li>
        <li>
          <svg
            t="1638929544015"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            p-id="9907"
            width="3.7vh"
            height="3.7vh"
          >
            <path
              d="M512 557.248l233.344 233.408 45.248-45.248L557.248 512l233.344-233.344-45.248-45.312L512 466.752 278.656 233.344l-45.312 45.312L466.752 512l-233.408 233.344 45.312 45.312L512 557.248z"
              p-id="9908"
            ></path>
          </svg>
        </li>
        <li>详情</li>
        <li><img src="../../public/images/keep/fenxiang.png" alt="" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
  props: ["mydata"],
};
</script>

<style scoped>
header {
  width: 100vw;
  background-color: #fefefe;
  margin-top: -1vh;
  height: 11.5vh;
}

header p:nth-of-type(1) {
  font-size: 2.4vh;
  color: #1c1c1c;
  line-height: 4vh;
}
header p:nth-of-type(3) {
  color: #068E39;
  font-weight: 500;
}
header p {
  padding: 4px 0;
  font-size: 1.6vh;
  line-height: 2vh;
  color: #a8a7a7;
  text-indent: 4vw;
}

header p img {
  width: 17px;
  margin-right: 5px;
  vertical-align: text-bottom;
}
.top {
  position: fixed;
  display: block;
  z-index: 90;
  width: 100vw;
  height: 4vh;
  padding-bottom: 2vh;
  top: 0vh;
  left: 0;
  background-color: #fefefe;
}

.top li {
  float: left;
  position: absolute;
}

.top li:nth-of-type(1) {
  left: 7vw;
  top: 2.8vh;
  width: 1.3vh;
  height: 1.3vh;
  border-bottom: #1c1c1c 2px solid;
  border-right: #1c1c1c 2px solid;
  transform: rotate(135deg);
}

.top li:nth-of-type(2) {
  left: 15vw;
  top: 1.8vh;
}

.top li:nth-of-type(3) {
  top: 1.2vh;
  left: 50%;
  font-size: 1.8vh;
  transform: translate3d(-1em, 0, 0);
}

.top li:nth-of-type(4) {
  top: 1.7vh;
  right: 5vw;
  font-size: 1.8vh;
}
.top li:nth-of-type(4) img {
  width: 2.3vh;
}
.biao {
  position: absolute;
  right: 3vh;
  top: 12.8vh;
  width: 9.4vh;
  height: 9.4vh;
  background: url(../../public/images/keep/已通过.png) no-repeat;
  background-size: contain;
}
</style>